<template>
  <div class="detail-tab3 content">
    <div class="content">
      <div class="charts">
        <!-- 图表 -->
        <MultipleLine
          :id="'multipleLine'"
          :chartData="chartData"
          v-if="chartData.xAxisData.length > 0"
        />
        <div v-else style="text-align: center; padding: 100px">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <div>
      <el-table :data="tableData" class="tableBoxChild">
        <!-- <el-table-column label="序号" align="center" type="index">
        </el-table-column> -->
        <el-table-column prop="dataDate" label="时间" align="center">
        </el-table-column>
        <el-table-column
          prop="valueGrossPrice"
          label="估值全价（元）"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="accruedInterest"
          label="应计利息（元）"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="valueGrossPrice"
          label="估值净价（元）"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="valueYield"
          label="估值收益率（%）"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="valueSourceSys" label="估值来源" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import MultipleLine from "./charts/MultipleLine.vue";
import { ValuationInformation } from "@/api/customerManagement/bondRiskProfile.js";
import moment from "moment";

export default {
  name: "DetailTab1",
  components: {
    MultipleLine,
  },
  props: {
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tableData: [],
      chartData: {
        xAxisData: [],
        data: [],
      },
    };
  },
  watch: {},
  mounted() {},
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const params = {
        bondId: this.rowData.bondId,
      };
      const { data } = await ValuationInformation(params);
      const data1 = JSON.parse(JSON.stringify(data));
      data1.sort((a, b) => moment(a).diff(b) >= 0); //这是升序，倒序的话翻过来
      this.tableData = data1;
      const chartData = {
        xAxisData: [],
        data: [
          {
            name: "估值全价",
            data: [],
            yIndex: 0,
          },
          {
            name: "估值净价",
            data: [],
            yIndex: 0,
          },
          {
            name: "估值收益率",
            data: [],
            yIndex: 1,
          },
        ],
      };
      const dateList = [];
      data.forEach((element) => {
        chartData.xAxisData.push(element.dataDate);
        chartData.data[0].data.push(element.valueGrossPrice);
        chartData.data[1].data.push(element.valueNetprice);
        chartData.data[2].data.push(element.valueYield);
      });
      this.chartData = chartData;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
.detail-tab3 {
  color: #ffffff;
  .title {
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .title-small {
    font-size: 14px;
  }
  .mg-b20 {
    margin-bottom: 20px;
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
</style>
